<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <div style="height:200px;background-color:dodgerblue;"></div>
    <div style="background-color:red;height:100px;margin-top:10px"></div>
<!--margin外边距属性定义元素边框外部的空间，用于在元素之间创建距离,不影响元素自身的大小-->
<!--元素的大小主要由其宽度（width）和高度（height）属性，以及可能的padding（内边距）和border（边框）属性来决定-->
<!--通过将元素的 margin-left 和 margin-right 属性设置为 auto，并且确保元素有一个明确的宽度，可以实现元素在其父容器中的水平居中。-->
<!--属性值写法与padding内边距相同-->
<!--区域居中 通过将元素的 margin-left 和 margin-right 属性设置为 auto（如margin: 0 auto;），并且确保需要居中的块级元素和父元素有一个明确的宽度，可以实现元素在其父容器中的水平居中。-->
<!--外边距问题-合并现象：垂直排列的兄弟元素，上下margin会合并，实际间距取两者中较大的值，而非累加-->
<!--外边距问题-塌陷问题：父子级的标签，子级添加上方向外边距会产生塌陷问题，导致父级会随子级一起下移(解决方法：1. 使用边框或内边距。2. 使用Flexbox布局。3. 使用Grid布局。4. 使用BFC，如overflow: hidden（块级格式化上下文）)。5. 使用浮动或定位。-->
</body>
</html>